---
topTitle: Components
title: Bg Color
icon: fa fa-barcode
---
<style>
  ul[rel^="bg"] > li {height: 50px; line-height:50px;}
</style>
<h3>Background Color</h3>
<div class="row">
  <div class="col-sm-3">
    <ul class="list-unstyled bg-red" rel="bg-">
      <li>.bg-bg-red</li>
      <li class="dker">.dker</li>
      <li class="dk">.dk</li>
      <li class="lt">.lt</li>
      <li class="lter">.lter</li>
    </ul>
  </div>
  <!-- /.col-sm-3 -->
    <div class="col-sm-3">
    <ul class="list-unstyled bg-brick" rel="bg-">
      <li>.bg-brick</li>
      <li class="dker">.dker</li>
      <li class="dk">.dk</li>
      <li class="lt">.lt</li>
      <li class="lter">.lter</li>
    </ul>
  </div>
  <!-- /.col-sm-3 -->
   <div class="col-sm-3">
    <ul class="list-unstyled bg-orange" rel="bg-">
      <li>.bg-orange</li>
      <li class="dker">.dker</li>
      <li class="dk">.dk</li>
      <li class="lt">.lt</li>
      <li class="lter">.lter</li>
    </ul>
  </div>
  <!-- /.col-sm-3 -->
  
      <div class="col-sm-3">
    <ul class="list-unstyled bg-green" rel="bg-">
      <li>.bg-green</li>
      <li class="dker">.dker</li>
      <li class="dk">.dk</li>
      <li class="lt">.lt</li>
      <li class="lter">.lter</li>
    </ul>
  </div>
  <!-- /.col-sm-3 -->
  
      <div class="col-sm-3">
    <ul class="list-unstyled bg-blue" rel="bg-">
      <li>.bg-blue</li>
      <li class="dker">.dker</li>
      <li class="dk">.dk</li>
      <li class="lt">.lt</li>
      <li class="lter">.lter</li>
    </ul>
  </div>
  <!-- /.col-sm-3 -->
  
      <div class="col-sm-3">
    <ul class="list-unstyled bg-black" rel="bg-">
      <li>.bg-black</li>
      <li class="dker">.dker</li>
      <li class="dk">.dk</li>
      <li class="lt">.lt</li>
      <li class="lter">.lter</li>
    </ul>
  </div>
  <!-- /.col-sm-3 -->
  
      <div class="col-sm-3">
    <ul class="list-unstyled bg-dark" rel="bg-">
      <li>.bg-dark</li>
      <li class="dker">.dker</li>
      <li class="dk">.dk</li>
      <li class="lt">.lt</li>
      <li class="lter">.lter</li>
    </ul>
  </div>
  <!-- /.col-sm-3 -->
  
      <div class="col-sm-3">
    <ul class="list-unstyled bg-light" rel="bg-">
      <li>.bg-light</li>
      <li class="dker">.dker</li>
      <li class="dk">.dk</li>
      <li class="lt">.lt</li>
      <li class="lter">.lter</li>
    </ul>
  </div>
  <!-- /.col-sm-3 -->
</div>
<!-- /.row -->